<!DOCTYPE html>
<!--  引入thymeleaf标签库  这样，才能使用th:*形式的标签！ 通过${…}进行取值  链接表达式: @{…}  这种符号的【替换】，都是在【服务器端】完成的，如果没有服务器端去【解析】和【替换】这些【标记符号】，这些标记符号就真的只是普通字符串而已 -->
<html  xmlns="http://www.w3.org/1999/xhtml"
       xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>短信推送</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script th:src="@{static/js/message/vue.js}"></script>
    <!--  引入element组件库 -->
    <script th:src="@{static/js/message/index.js}"></script>
    <!--  引入element样式 -->
    <link rel="stylesheet" th:href="@{static/css/message/index.css}">
    <!--  引入axios组件 -->
    <script th:src="@{static/js/message/axios.min.js}"></script>
    <!--  引入自定义样式 -->
    <link rel="stylesheet" th:href="@{static/css/message/01.css}">

</head>

<body>
<!--
说明：

负责人：赵扬
页面描述：《短信推送页面》，向用户发送信息推送
创建时间：2020年12月7日09:55:53
更新时间：2020年12月8日15:00:21

技术选型：
thymeleaf（用于url地址解析，使用th:*标签库） + shiro（用于权限控制） + element（页面布局和视图和模型的绑定） + axios（发送异步请求）

版本：1.1
版本描述：使用element ui绘制页面以及完成model和view的绑定。使用thymeleaf配合axios发送异步请求。

1.thymeleaf：【url地址的解析】  例子：<script th:src="@{static/js/vue.js}"></script>
2.axios【发送异步请求】，体现【rest full】的编程风格  例子：axios.post([[@{admin/more}]],params) 和 axios.get(url[, config])、axios.delete(url[, config])
3.element ui: 用于【绑定模型（数据）和视图（各种div，表格，按钮）】  例子：<button type="button" @click="add()">新增</button>
4.shiro（权限控制）：与我无关，由小组成员实现该功能



其他：
什么是模板引擎：使用符号或者自定义标记 + 网页中不变的东西 = 模板引擎
模板引擎的作用： 将页面中动态的内容，使用标记或某些符号，进行静态的替换。从而做到：浏览器认为 整个网页都是静态的内容（进而可以做到：浏览器缓存HTML，Nginx缓存HTML） 从而提升系统的整合响应性能


前后端不分离？要怎样才算前后端不分离？
我也不懂！！！
反正，我就要分离。前后端通过调用接口交互，数据格式json。使用最新技术总没错！

-->


<div id="alice">

    短信推送控制台
    <el-divider></el-divider>

    <div class="div_out">
        <span class="star">*</span> 群发人群：
        <div class="div_inner">
            <el-select v-model="selected_schoolID" placeholder="选择发送的学校"  @change="get_selected_schoolID" :disabled="send_to_all" size="small">
                <el-option v-for="item in school_name_list" :key="item.id" :label="item.schoolName" :value="item.id">
                    {{item.schoolName}}
                </el-option>
            </el-select>
        </div>


    </div>



    <div class="div_out">
        <span class="star">*</span> 任务名称：

        <div class="div_inner">
            <el-input v-model="TaskName" placeholder="请输入任务名称" size="small"></el-input>
        </div>

    </div>


    <div class="div_out">
        <span class="star">*</span> 任务描述：

        <div class="div_inner">
            <el-input type="textarea" v-model="TaskDesc" size="small"></el-input>
        </div>

    </div>





    <div class="div_out">
        <span class="star">*</span> 消息类型：

        <div class="div_inner">
            <el-select v-model="SMS_type_selectedID" placeholder="选择消息类型"  @change="get_sms_typeID" size="small">
                <el-option v-for="item in SMS_type" :key="item.id" :label="item.name" :value="item.id">
                    {{item.name}}
                </el-option>
            </el-select>
        </div>
    </div>


    <div class="div_out">
        <span class="star">*</span> 短信签名：

        <div class="div_inner">
            <el-select v-model="SMS_sign_selectedID" placeholder="选择短信签名"  @change="get_sms_signID" size="small">
                <el-option v-for="item in SMS_sign" :key="item.id" :label="item.name" :value="item.id">
                    {{item.name}}
                </el-option>
            </el-select>
        </div>
    </div>




    <div class="div_out">
        <span class="star">*</span> 短信模板：

        <div class="div_inner">
            <el-select v-model="SMS_archetype_selectedID" placeholder="选择短信模板"  @change="get_sms_archetypeID" size="small">
                <el-option v-for="item in SMS_archetype" :key="item.id" :label="item.name" :value="item.id">
                    {{item.name}}
                </el-option>
            </el-select>
        </div>

        <el-row v-if="archetype_content != null">
            <el-col :span="24"><div class="grid-content bg-purple">{{archetype_content}}</div></el-col>
        </el-row>

    </div>




    <div class="div_out">
        <span class="star">*</span> 发送时间：
        <el-radio v-model="send_type" label="1" >立即发送</el-radio>
        <el-radio v-model="send_type" label="2" >定时发送</el-radio>

        <el-date-picker
                v-model="time"
                type="datetime"
                placeholder="选择日期和时间"
                size="medium"
                format="yy-MM-dd hh:mm:ss"
                value-format="yyyy-MM-dd hh:mm:ss">
        </el-date-picker>

    </div>



    </br>
    <el-button type="success" size="small" @click="sendToServer">提交</el-button>
    <el-button size="small">取消</el-button>






    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%">

        <span>短信群发成功！</span>
        <span slot="footer" class="dialog-footer">

    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>







</div>




<!--  引入自定义js -->
<script th:src="@{static/js/message/01.js}" ></script>

</body>
</html>